<template>
  <!-- 真题1卡片 组件 -->
  <div class="sat1_box" @click="handleRouter">
    <!-- 真题标题 -->
    <div class="sat1_title">
      <span class="sat1_title_start">【2022】</span>
      2022年一级消防工程师富士达如果畅真题
    </div>
    <!-- 底部 真题记录及按钮 -->
    <div class="sat1_bottom">
      <div class="bottom">已做:<span>0次</span>上次得分:<strong>0</strong></div>
      <div class="link">开做答题</div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  props: {
    info: {
      type: Number,
      defulte: 0,
    },
  },
  setup(props) {
    const router = useRouter();
    const handleRouter = () => {
      router.push(`/overTopic/${props.info}`);
    };
    return {
      handleRouter,
    };
  },
};
</script>

<style lang="less" scoped>
.sat1_box {
  width: 100%;
  //   height: 9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 0.3rem;
  box-sizing: border-box;
  background-color: #fff;
  //   border: 1px solid red;
  .sat1_title {
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 600;
    color: #2a2929;
    line-height: 1.5;
    .sat1_title_start {
      color: red;
    }
  }
  .sat1_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    .bottom {
      font-size: 0.88rem;
      color: #b0b0b0;
      span,
      strong {
        margin: 0 0.5rem;
      }
      strong {
        color: red;
      }
    }
    .link {
      display: flex;
      align-items: center;
      height: 2rem;
      padding: 0rem 1rem;
      border-radius: 2rem;
      font-size: 1rem;
      color: #fff;
      background-image: linear-gradient(to top right, #f69f9f, red);
    }
  }
}
</style>
